<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
             <el-form-item label="地区类型" prop="nature">
               <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
                 <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
               </el-select>
             </el-form-item>
             <el-form-item label="园所类型" prop="schoolType">
               <el-select v-model="queryParams.schoolType" placeholder="请选择园所类型" clearable size="small">
                 <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
               </el-select>
             </el-form-item>
              <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
               </el-form-item>
      </el-form>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="教室区角" name="first"></el-tab-pane>
    <el-tab-pane label="户外活动" name="second"></el-tab-pane>
    <el-tab-pane label="功能教室" name="third"></el-tab-pane>
  </el-tabs>
        <div class="chartDom" ref="chartDom"></div>
    </div>
</template>
<script>

import moment from "moment";
import { natureCorner } from "@/api/qu/qyqjfacility";
export default {
  name: "ysqjdb",
  data() {
    return {
      activeName: 'first',
        queryParams:{
            nature:'0',
            schoolType:''
        },
        schoolNatureOptions:[],
        schoolTypeOptions:[],
        chartDom:null,
        chartList:[
        ],
        cornerTypeOptions:[]
    };
  },
  created() {
       this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
          console.log("neiche",this.schoolNatureOptions)
       });
       this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
       this.getDicts("corner_type").then(response => {
          this.cornerTypeOptions = response.data;
        });
  },
  mounted(){
        this.chartDom = this.$echarts.init(this.$refs.chartDom);
         this.getList()
   },
  methods: {
    handleClick(tab, event) {
      let cornerModel;
    switch (tab.name) {
      case 'first':
        cornerModel = 1;
        break;
      case 'second':
        cornerModel = 2;
        break;
      case 'third':
        cornerModel = 3;
        break;
      default:
        // 默认值或其他处理
        break;
    }
    this.getList(cornerModel);
      },
   async  getList(cornerModel){
        try {
            const obj ={
                nature:this.queryParams.nature,
                schoolType:this.queryParams.schoolType,
                cornerModel: cornerModel, // 传递参数
            }
           const data = await natureCorner(obj);
           this.chartList=data.rows.map(item=>{
              return {
                name: this.cornerTypeFormat(item),
                value:item.cornerNum
               }
           })
           this.chartDomFn();
        } catch (error) {
            console.log(error);
        }
    },
     /** 搜索按钮操作 */
     handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams= {
        nature:'0',
      }
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 区角类型字典翻译
    cornerTypeFormat(row) {
            return this.selectDictLabel(this.cornerTypeOptions, row.cornerType);
         },
    chartDomFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '区角统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          dataZoom:{
           bottom:0,
           show:12/this.chartList.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:12/this.chartList.length*100
         },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',

          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:0,
               interval: 0,//使x轴文字显示全
              },
              data:  this.chartList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'50',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.chartList,
              },
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.chartDom.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
     //地图监听窗口缩放事件
     monitorResize(){
        this.chartDom.resize();

      },

  }
};
</script>

<style lang="scss" scoped>
.chartDom{
    margin-top: 30px;
    width:90%;
    height:500px;
}
</style>
